<template>
	<view>
		<view class="forgetbox">
			<!-- <view class="forgetbox_top1">初中单词2000个</view> -->
			<view class="forgetbox_top d-b-c">
				<view class="forgetbox_top_item">
					<view class="forgetbox_top_num">{{todayStudyNum}}</view>
					<view class="f24 gray3 mt20">今日识词</view>
				</view>
				<view class="forgetbox_top_item">
					<view class="forgetbox_top_num">{{todayReviewNum}}</view>
					<view class="f24 gray3 mt20">今日待复习</view>
				</view>
				<view class="forgetbox_top_item">
					<view class="forgetbox_top_num">{{totalStudyNum}}</view>
					<view class="f24 gray3 mt20">累计识词</view>
				</view>
			</view>
			<!-- <view class="forgetbox_kaishi" @tap="goReview(0)">开始复习</view>
			<view class="forgetbox_jixu" @tap="goStudy()">继续学习</view> -->
			<!-- <view class="forgetbox_zhuijia" @tap="reStudy()">追加单词</view> -->
		</view>
		
		<view class="top_box">
			<view class="top_boximgzong ">
				<view class="boximg">
					<!-- <image src="/static/index1/8.png" mode="widthFix"></image> -->
					<view class="top_boxnum" v-for="(item, index) in list" :key="index" :class="item.class" v-if="index < 8" @click="goReview(index+1)">
						{{ item.num }}
					</view>
				</view>
				<view class="top_boximg" @click="goStudy">
					<view class="center-box">抗遗忘进程</view>
				</view>
			</view>
		</view>
		
		<view class="study-box">
			<view class="box-btn" @click="goReview(0)">开始复习</view>
			<view class="box-btn" @click="goStudy">开始学习</view> 
			<!-- <view class="box-btn" @click="goStudy">继续学习</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarH: 0,
				customBarH: 0,
				bookId: 0,
				unitId: 0,
				todayStudyNum: 0,
				todayReviewNum: 0,
				totalStudyNum: 0,
				list: [
					{num: 0, class: 'top_boxnum1'}, // 抗遗忘
					{num: 0, class: 'top_boxnum2'}, // 第1次
					{num: 0, class: 'top_boxnum3'}, // 第2次
					{num: 0, class: 'top_boxnum4'}, // 第3次
					{num: 0, class: 'top_boxnum5'}, // 第4次
					{num: 0, class: 'top_boxnum6'}, // 第5次
					{num: 0, class: 'top_boxnum7'}, // 第6次
					{num: 0, class: 'top_boxnum8'}, // 掌握
				],
			}
		},
		onLoad(option) {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 1500)
				return false
			} else {
				const app = getApp()
				// 获取状态栏和导航条高度
				this.statusBarH = app.globalData.statusBarH
				this.customBarH = app.globalData.customBarH
				this.bookId = option.bookId || 0
				this.unitId = option.unitId || 0
				this.getStudyStatistics()
				this.getReviewStatistics()
			}
		},
		methods: {
			getStudyStatistics() {
				this.$u.get(this.$u.api.studyStatistics).then((res) => {
					this.todayStudyNum = res.data.today_study_num
					this.todayReviewNum = res.data.today_review_num
					this.totalStudyNum = res.data.total_study_num
				}).catch((err) => {
					console.log(err)
				})
			},
			getReviewStatistics() {
				this.$u.get(this.$u.api.reviewStatistics).then((res) => {
					let data = res.data
					for (let i=0;i<data.length;i++) {
						this.list[i].num = data[i]
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			reStudy() {
				uni.navigateTo({
					url: '/pages/study/beforeAgain?bookId='+this.bookId+'&unitId='+this.unitId
				})
			},
			goStudy() {
				uni.navigateTo({
					url: '/pages/study/before?bookId='+this.bookId+'&unitId='+this.unitId
				})
			},
			goReview(level) {
				uni.navigateTo({
					url: '/pages/study/review/review?bookId='+this.bookId+'&unitId='+this.unitId+'&reviewLevel='+level
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	page{
		background: #EEFAFF;
	}
	.top_box {
		width: 100%;
		position: relative;
	
		.top_boxback {
			width: 100%;
			height: 100%;
	
			image {
				width: 100%;
				height: 100%;
			}
			
			.back {
				position: absolute;
				left: 40rpx;
				z-index: 999;
			}
		}
		.top_boximgzong{
			position: relative;
			// width: 92%;
			// position: absolute;
			// top: 10vh;
			// left: 4%;
		}
		
		.boximg{
			width: 100%;
			height: calc(100vw * 691 / 693);
			position: relative;
			background: url('~@/static/index1/8.png') no-repeat;
			background-position: center center;
			background-size: contain;
			.top_boxnum{
				position: absolute;
				font-size: 46rpx;
				font-weight: bold;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 100rpx;
				transform: translate(-50% ,-50%);
				// left: 50%;
				// top: 50%;
				
			}
			.top_boxnum1{
				left: 69%;
				top: 26%;
				color: #E06777;
				&:hover{
					color: #fff;
					cursor: pointer;
					background-color: #E06777;
					border-radius:50% ;
				}
			}
			.top_boxnum2{
				left: 80%;
				top: 46%;
				color: #EFB265;
				&:hover{
					color: #fff;
					cursor: pointer;
					background-color: #EFB265;
					border-radius:50% ;
				}
			}
			.top_boxnum3{
				left: 74%;
				top: 69%;
				color: #96BE75;
				&:hover{
					color: #fff;
					cursor: pointer;
					background-color: #96BE75;
					border-radius:50% ;
				}
			}
			.top_boxnum4{
				left: 54%;
				top: 80%;
				color: #84D096;
				&:hover{
					color: #fff;
					cursor: pointer;
					background-color: #84D096;
					border-radius:50% ;
				}
			}
			.top_boxnum5{
				left: 32%;
				top: 73%;
				color: #84D096;
				&:hover{
					color: #fff;
					cursor: pointer;
					background-color: #84D096;
					border-radius:50% ;
				}
			}
			.top_boxnum6{
				left: 20%;
				top: 53%;
				color: #4BBBA3;
				&:hover{
					color: #fff;
					cursor: pointer;
					background-color: #4BBBA3;
					border-radius:50% ;
				}
			}
			.top_boxnum7{
				left: 26%;
				top: 31%;
				color: #4AC57F;
				&:hover{
					color: #fff;
					cursor: pointer;
					background-color: #4AC57F;
					border-radius:50% ;
				}
			}
			.top_boxnum8{
				left: 47%;
				top: 20%;
				color: #45A38F;
				&:hover{
					color: #fff;
					cursor: pointer;
					background-color: #45A38F;
					border-radius:50% ;
				}
			}
		}
		.top_boximg{
			width: 250rpx;
			height: 250rpx;
			position: absolute;
			margin: 0 auto;
			top: 50%;
			left: 50%;
			box-sizing: border-box;
			padding: 75rpx;
			transform: translate(-50%,-50%);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			cursor: pointer;
			
			.center-box{
				text-align: center;
			}
		}
	}
	
	.forgetbox{
		box-sizing: border-box;
		padding: 30rpx 50rpx 0;
		.forgetbox_top1{
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
		}
		.forgetbox_top{
			display: flex;
			margin-top: 30rpx;
			align-items: center;
			justify-content: space-around;
			background-color: #fff;
			background: rgba(255,255,255,0.6);
			box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(0,0,0,0.1);
			border-radius: 20rpx;
			padding: 36rpx 0;
			
			.forgetbox_top_num{
				text-align: center;
				font-size: 40rpx;
				font-weight: bold;
				color: #4BB0FF;
			}
		}
	}
	
	.u-circle-progress{
		border-radius: 50%;
	}
	
	.study-box{
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 80rpx;
		.box-btn{
			width: 316rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 10rpx;
			background: #F59A2C;
			color: #fff;
			font-size: 24rpx;
			cursor: pointer;
			&:nth-child(2){
				background: #0B99FE;
			}
		}
	}
	
</style>
